<template>
  <div class="page-content">
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form :model="searchForm" :rules="rules" label-width="100px" ref="searchForm">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <form-input label="搜索" @input="change($event)" v-model="searchForm.keyword" prop="keyword"
                placeholder="单号/客户名称" @keyup.enter.native="submitForm('searchForm')"></form-input>
            </el-col>
            <el-row :xs="24" :sm="12" :lg="6" style="float: left;margin-right: 10px;">
              <el-button type="primary" @click="submitForm('searchForm')">搜索</el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </table-bar>
    <div class="order-table">
      <k-table :data="tableData" v-loading="loading" ref="ordertable" @clickHandler="open($event)"
        @sortHandler="sort($event)" :page="setpage" :total="setpage.total" @changePage="gotopage($event)"
        @changeSize="gotosize($event)">
        <el-table-column type="index" width="50" fixed="left">
        </el-table-column>
        <el-table-column label="操作" width="130" fixed="left">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" icon="el-icon-edit" class="el-btn-red" type="text">审核</el-button>
            <el-button @click="open(scope.row)" icon="el-icon-more" type="text">明细</el-button>
          </template>
        </el-table-column>
        <div v-for="(item, index) in tableHeader" :key="index" style="width: 100%;">
          <el-table-column :prop="item.name" :label="item.title" show-overflow-tooltip :width="
              item.name === 'ddpaper'
                ? '200'
                : item.name === 'ddtime'
                ? '180'
                : item.name === 'guestname'
                ? '200'
                : item.name === 'ddtype'
                ? '120'
                : ''
            " v-if="columns[index].show" sortable="custom">
          </el-table-column>
        </div>
      </k-table>
    </div>
    <el-dialog :title="ddpaper" :visible.sync="dialogTableVisible" @close="clear" width="70%">
      <k-table :data="gridData" v-loading="loading">
        <el-table-column v-for="(item, index) in gridDataHeader" :key="index" :prop="item.name" :label="item.title"
          :width="
            item.name === 'pjcode' ? '200' : item.name === 'pjname' ? '200' : ''
          ">
        </el-table-column>
      </k-table>
    </el-dialog>
  </div>
</template>

<script>
  import { CustomerOrderApi } from "@/api/orderApi";
  import { getDdDetailApi } from "@/api/orderApi";
  import { checkPaperApi } from "@/api/orderApi";
  export default {
    inject: ["reload"],
    data() {
      return {
        tableData: [],
        columns: [],
        tableHeader: [],
        tableBody: [],
        gridDataHeader: [],
        loading: true,
        ddpaper: "",
        gridData: [],
        dialogTableVisible: false,
        showEmptyTips: true,
        searchForm: {
          keyword: ""
        },
        setpage: {
          page: 1,
          pageSize: 10,
          total: 0
        },
        rules: {
          keyword: [{ required: true, message: "请输入关键词", trigger: "blur" }]
        }
      };
    },
    mounted() {
      this.CustomerOrderData("", "", 1);
    },
    methods: {
      CustomerOrderData(prop, order, pageindex) {
        let userdata = JSON.stringify(this.$store.state.user.user.info);
        userdata = JSON.parse(userdata);
        let guestcode = userdata.reguserno;
        let gscode = userdata.gscode;
        let username = userdata.userName;
        let userid = userdata.id;
        let logintype = userdata.logintype;
        let posttype = userdata.posttype;
        let sort = "";
        if (order != undefined && order.length > 0 && order != null) {
          if (order == "ascending") {
            sort = prop + " asc ";
          } else if (order == "descending") {
            sort = prop + " desc ";
          }
        }
        CustomerOrderApi({
          guestcode: guestcode,
          gscode: gscode,
          state: "待审核",
          pagesize: this.setpage.pageSize,
          pageindex: pageindex,
          begintime: "",
          endtime: "",
          sort: sort,
          username: username,
          userid: userid,
          menuename: "CustomerOrder",
          menucname: "客户订单",
          logintype: logintype,
          posttype: posttype,
          op_type: "查询"
        }).then(res => {
          this.loading = false;
          this.tableHeader = [];
          this.tableData = [];
          this.columns = [];
          this.setpage.total = res.count;
          res.filesName.forEach(element => {
            if (element.hidden === false && element.title != "groupid") {
              this.tableHeader.push({ title: element.title, name: element.name });
              this.columns.push({ name: element.title, show: true });
            }
          });
          res.data.forEach(element => {
            this.tableData.push({
              id: element.id,
              ddtime: element.ddtime,
              ddpaper: element.ddpaper,
              ddtype: element.ddtype,
              guestname: element.guestname,
              cnt: element.cnt,
              ddamount: element.ddamount,
              xsprice: parseFloat(element.xsprice).toFixed(2),
              ddstate: element.ddstate,
              ddnote: element.ddnote,
              guestcode: element.guestcode
            });
          });
        });
      },
      CustomerOrderDetailData(ddpaper, qpc_guestcode) {
        let userdata = JSON.stringify(this.$store.state.user.user.info);
        userdata = JSON.parse(userdata);
        let guestcode = userdata.reguserno;
        let gscode = userdata.gscode;
        getDdDetailApi({
          guestcode: guestcode,
          gscode: gscode,
          ddpaper: ddpaper,
          qpc_guestcode: qpc_guestcode,
          sort: ""
        }).then(res => {
          this.loading = false;
          res.filesName.forEach(element => {
            if (element.hidden === false) {
              this.gridDataHeader.push({
                title: element.title,
                name: element.name
              });
            }
          });
          res.data.forEach(element => {
            this.gridData.push({
              pjcode: element.pjcode,
              pjname: element.pjname,
              pjsize: element.pjsize,
              pjfactory: element.pjfactory,
              amount: element.amount,
              pjunit: element.pjunit,
              xsprice: parseFloat(element.xsprice).toFixed(2),
              note: element.note
            });
          });
        });
      },
      open(row, column, cell, event) {
        this.ddpaper = "订单：" + row.ddpaper;
        this.CustomerOrderDetailData(row.ddpaper, row.guestcode);
        this.dialogTableVisible = true;
      }, // 表格间隔class
      sort(val) {
        this.CustomerOrderData(val.prop, val.order);
      },
      gotopage(val) {
        this.CustomerOrderData("", "", val.page);
      },
      gotosize(val) {
        console.log(val);
      },
      clear() {
        this.gridDataHeader = [];
        this.gridData = [];
      },
      handleClick(row) {
        let userdata = JSON.stringify(this.$store.state.user.user.info);
        userdata = JSON.parse(userdata);
        let guestcode = userdata.reguserno;
        let gscode = userdata.gscode;
        let username = userdata.userName;
        let userid = userdata.id;
        let logintype = userdata.logintype;
        let posttype = userdata.posttype;
        checkPaperApi({
          reguserno: guestcode,
          gscode: gscode,
          idlist: row.id,
          guestcode: guestcode,
          menuename: "CustomerOrder",
          menucname: "客户订单",
          username: username,
          userid: userid,
          logintype: logintype,
          posttype: posttype,
          op_type: "审核",
          note: row.ddpaper
        }).then(res => {
          this.loading = false;
          if (res.code == "0") {
            this.$message.success("审核成功");
            this.refresh();
          }
        });
      },
      refresh() {
        this.reload();
      },
      changeColumn(columns) {
        this.columns = columns;
        this.doLayout();
      },
      doLayout() {
        this.$nextTick(() => {
          this.$refs.ordertable.doLayout();
        });
      },
      change(e) {
        this.$forceUpdate();
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let userdata = JSON.stringify(this.$store.state.user.user.info);
            userdata = JSON.parse(userdata);
            let guestcode = userdata.reguserno;
            let gscode = userdata.gscode;
            CustomerOrderApi({
              guestcode: guestcode,
              gscode: gscode,
              state: "待审核",
              begintime: "",
              endtime: "",
              sort: "",
              keyword: this.searchForm.keyword
            }).then(res => {
              this.loading = false;
              this.tableHeader = [];
              this.tableData = [];
              this.columns = [];
              this.setpage.total = res.count;
              res.filesName.forEach(element => {
                if (element.hidden === false && element.title != "groupid") {
                  this.tableHeader.push({
                    title: element.title,
                    name: element.name
                  });
                  this.columns.push({ name: element.title, show: true });
                }
              });
              res.data.forEach(element => {
                this.tableData.push({
                  id: element.id,
                  ddtime: element.ddtime,
                  ddpaper: element.ddpaper,
                  ddtype: element.ddtype,
                  guestname: element.guestname,
                  cnt: element.cnt,
                  ddamount: element.ddamount,
                  xsprice: parseFloat(element.xsprice).toFixed(2),
                  ddstate: element.ddstate,
                  ddnote: element.ddnote,
                  guestcode: element.guestcode
                });
              });
            });
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
</script>

<style lang="scss">
  .page-content {
    width: 100%;
    height: 100%;
  }

  .order-table-expand {
    font-size: 0;
  }

  .order-table-expand label {
    width: 90px;
    color: #2d8cf0;
  }

  .order-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .order-table {
    height: 100% !important;

    // 分页组件
    ::v-deep .el-pagination {
      margin: 20px 0 0 -5px;
      padding-left: 0;
    }

    // 滚动条
    ::v-deep ::-webkit-scrollbar {
      height: 6px !important;
      display: block !important;
    }

    .empty {
      i {
        color: #d7d6d6;
        font-size: 40px;
      }

      p {
        color: #999999;
        font-size: 13px;
        line-height: 30px;
        margin-top: -10px;
      }
    }
  }

  .hide-scroll-bar {
    display ::v-deep ::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
    }
  }

  @media only screen and (max-width: $device-notebook) {}

  @media only screen and (max-width: $device-ipad) {
    // .page-content{
    //   display: none;
    // }
  }
</style>